import { useState } from 'react';
import { View, Text, Input, ScrollView, Icon } from '@tarojs/components';
import { SideBar } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'; // 引入 Taro 用于页面跳转和事件通道
import './index.scss';

// 模拟数据
const jobData = [
  {
    id: 'internet',
    name: '互联网/AI',
    jobs: [
      { id: 'u3d', name: 'U3D' },
      { id: 'python', name: 'Python' },
      { id: 'php', name: 'PHP' },
      { id: 'data', name: '数据采集' },
      { id: 'ui', name: 'UI设计师' },
      { id: 'cpp', name: 'C/C++' },
      { id: 'frontend', name: '前端工程师' },
      { id: 'backend', name: '后端工程师' },
      { id: 'algorithm', name: '算法工程师' },
      { id: 'ai', name: 'AI工程师' },
      { id: 'product', name: '产品经理' },
      { id: 'design', name: 'UI/UX设计师' },
      { id: 'qa', name: '测试工程师' },
      { id: 'devops', name: '运维工程师' },
      { id: 'data_scientist', name: '数据科学家' },
      { id: 'data_analyst', name: '数据分析师' },
      { id: 'data_engineer', name: '数据工程师' },
      { id: 'security', name: '安全工程师' },
      { id: 'game_dev', name: '游戏开发' },
      { id: 'mobile_dev', name: '移动开发' },
      { id: 'ios_dev', name: 'iOS开发' },
      { id: 'android_dev', name: 'Android开发' },
      { id: 'flutter_dev', name: 'Flutter开发' },
      { id: 'react_native_dev', name: 'React Native开发' },
      { id: 'embedded_dev', name: '嵌入式开发' },
      { id: 'hardware_engineer', name: '硬件工程师' },
      { id: 'sales_engineer', name: '销售工程师' },
      { id: 'presales_engineer', name: '售前工程师' },
      { id: 'post_sales_engineer', name: '售后工程师' },
      { id: 'support_engineer', name: '技术支持' },
      { id: 'consultant', name: '技术顾问' },
      { id: 'project_manager', name: '项目经理' },
      { id: 'tech_lead', name: '技术主管' },
      { id: 'architect', name: '架构师' },
      { id: 'cto', name: '技术总监' },
      { id: 'ceo', name: 'CEO' },
      { id: 'coo', name: 'COO' },
      { id: 'cfo', name: 'CFO' },
      { id: 'cmo', name: 'CMO' },
      { id: 'hr', name: '人力资源' },
      { id: 'hrbp', name: 'HRBP' },
      { id: 'recruiter', name: '招聘专员' },
      { id: 'training_specialist', name: '培训专员' },
      { id: 'compensation_specialist', name: '薪酬专员' },
      { id: 'benefits_specialist', name: '福利专员' },
      { id: 'hr_assistant', name: 'HR助理' },
      { id: 'finance', name: '财务' },
      { id: 'accountant', name: '会计' },
      { id: 'auditor', name: '审计' },
      { id: 'tax_specialist', name: '税务专员' },
      { id: 'finance_manager', name: '财务经理' },
      { id: 'marketing', name: '市场营销' },
      { id: 'marketing_manager', name: '市场经理' },
      { id: 'brand_manager', name: '品牌经理' },
      { id: 'product_marketing', name: '产品营销' },
      { id: 'growth_hacker', name: '增长黑客' },
      { id: 'content_creator', name: '内容创作' },
      { id: 'copywriter', name: '文案' },
      { id: 'seo_specialist', name: 'SEO专员' },
      { id: 'sem_specialist', name: 'SEM专员' },
      { id: 'social_media_manager', name: '社交媒体运营' },
      { id: 'operation', name: '运营' },
      { id: 'operation_manager', name: '运营经理' },
      { id: 'user_operation', name: '用户运营' },
      { id: 'content_operation', name: '内容运营' },
      { id: 'community_manager', name: '社群运营' },
      { id: 'customer_service', name: '客服' },
      { id: 'customer_service_manager', name: '客服经理' },
      { id: 'sales', name: '销售' },
      { id: 'sales_manager', name: '销售经理' },
      { id: 'sales_rep', name: '销售代表' },
      { id: 'business_development', name: '商务拓展' },
      { id: 'bd_manager', name: 'BD经理' },
      { id: 'legal', name: '法务' },
      { id: 'legal_counsel', name: '法务顾问' },
      { id: 'compliance_officer', name: '合规专员' },
      { id: 'admin', name: '行政' },
      { id: 'admin_assistant', name: '行政助理' },
      { id: 'receptionist', name: '前台' },
      { id: 'driver', name: '司机' },
      { id: 'cleaner', name: '保洁' },
      { id: 'security_guard', name: '保安' },
      { id: 'chef', name: '厨师' },
      { id: 'waiter', name: '服务员' },
      { id: 'cashier', name: '收银员' },
      { id: 'store_manager', name: '店长' },
      { id: 'shift_manager', name: '值班经理' },
      { id: 'team_leader', name: '组长' },
      { id: 'supervisor', name: '主管' },
      { id: 'director', name: '总监' },
      { id: 'vp', name: '副总裁' },
      { id: 'president', name: '总裁' },
      { id: 'chairman', name: '董事长' },
      { id: 'founder', name: '创始人' },
      { id: 'co_founder', name: '联合创始人' },
      { id: 'investor', name: '投资人' },
      { id: 'advisor', name: '顾问' },
      { id: 'mentor', name: '导师' },
      { id: 'coach', name: '教练' },
      { id: 'trainer', name: '培训师' },
      { id: 'teacher', name: '教师' },
      { id: 'professor', name: '教授' },
      { id: 'researcher', name: '研究员' },
      { id: 'scientist', name: '科学家' },
      { id: 'engineer', name: '工程师' },
      { id: 'technician', name: '技术员' },
      { id: 'operator', name: '操作员' },
      { id: 'analyst', name: '分析师' },
      { id: 'specialist', name: '专员' },
      { id: 'associate', name: '专员/助理' },
      { id: 'senior', name: '高级' },
      { id: 'lead', name: '主管/组长' },
      { id: 'manager', name: '经理' },
      { id: 'director', name: '总监' },
      { id: 'vp', name: '副总裁' },
      { id: 'cxo', name: 'CXO' },
    ],
  },
  {
    id: 'product',
    name: '产品',
    jobs: [
      { id: 'pm', name: '产品经理' },
      { id: 'ux', name: '用户体验设计师' },
      { id: 'ui_product', name: '产品UI设计师' },
      { id: 'product_analyst', name: '产品分析师' },
      { id: 'product_owner', name: '产品负责人' },
      { id: 'prd_manager', name: '产品管理经理' },
      { id: 'prd_director', name: '产品总监' },
    ],
  },
  {
    id: 'operation',
    name: '客服/运营',
    jobs: [
      { id: 'customerService', name: '客服专员' },
      { id: 'operationSpecialist', name: '运营专员' },
      { id: 'operation_manager', name: '运营经理' },
      { id: 'community_manager', name: '社群运营' },
      { id: 'content_operation', name: '内容运营' },
      { id: 'user_operation', name: '用户运营' },
      { id: 'cs_manager', name: '客服经理' },
      { id: 'cs_director', name: '客服总监' },
      { id: 'op_director', name: '运营总监' },
    ],
  },
];

function JobSelectPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [activeKey, setActiveKey] = useState('internet'); // 默认选中第一个行业
  const [selectedJob, setSelectedJob] = useState('');

  // 根据搜索词过滤职位
  const filteredJobs = searchTerm.trim() === ''
    ? jobData.find(item => item.id === activeKey)?.jobs || []
    : jobData.flatMap(industry =>
        industry.jobs.filter(job =>
          job.name.toLowerCase().includes(searchTerm.toLowerCase())
        )
      );

  const handleSearchChange = (e) => {
    setSearchTerm(e.detail.value);
  };

  const handleSidebarChange = (key) => {
    setActiveKey(key);
  };

  const handleJobClick = (jobId, jobName) => {
    setSelectedJob(jobId);
    // 选择后可以返回上一页，并携带选中的职位信息
    const eventChannel = Taro.getCurrentInstance().router?.current?.eventChannel;
    if (eventChannel) {
      eventChannel.emit('acceptDataFromOpenedPage', { jobId, jobName });
    }
    Taro.navigateBack(); // 返回上一页
  };

  return (
    <View className="job-select-page-container">
      11111
      {/* 搜索框 */}
      <View className="search-box">
        <Icon name="search" size={24} color="#999" />
        <Input
          placeholder="搜索职位名称，如：产品经理、前端开发..."
          value={searchTerm}
          onInput={handleSearchChange}
          className="search-input"
        />
      </View>

      {/* 提示信息 */}
      <View className="tip">
        <Icon name="tips" size={16} color="#999" />
        <Text>提示：可输入具体职位名称进行搜索</Text>
      </View>

      {/* 主要内容区 */}
      <View className="main-content">
        {/* 左侧 SideBar */}
        <SideBar
          className="sidebar"
          value={activeKey}
          onChange={handleSidebarChange}
        >
          {jobData.map((item) => (
            <SideBar.Item key={item.id} value={item.id}>
              <Text>{item.name}</Text>
            </SideBar.Item>
          ))}
        </SideBar>

        {/* 右侧内容区 */}
        <ScrollView
          className="content-area"
          scrollY
        >
          {filteredJobs.length > 0 ? (
            <View className="job-list">
              {filteredJobs.map((job) => (
                <View
                  key={job.id}
                  className={`job-item ${selectedJob === job.id ? 'job-item--selected' : ''}`}
                  onClick={() => handleJobClick(job.id, job.name)}
                >
                  <Text>{job.name}</Text>
                </View>
              ))}
            </View>
          ) : (
            <View className="no-results">
              <Text>没有找到匹配的职位</Text>
            </View>
          )}
        </ScrollView>
      </View>

      {/* 底部按钮 (可选) */}
      {/* <View className="footer-button">
        <View className="button-wrapper" onClick={() => Taro.navigateBack()}>
          <View className="button-text">返回</View>
        </View>
      </View> */}
    </View>
  );
}

export default JobSelectPage;